import React from 'react';
import {useDispatch} from "react-redux";
import {deleteWeiboAsync, putWeiboAsync, useGetSelector} from "../store/slice/weibo";
import PageList from "./pageList";

function CommonOn(props) {
    const dispatch = useDispatch()
    const {contentList} = useGetSelector()
    return (
        <div className="commentOn">
            <div className="noContent" style={{display:contentList.length===0?"block":"none"}}>暂无留言</div>
            <div className="messList">
                {
                    contentList.map(item=>(
                        <div key={item._id} className="reply">
                            <p className="replyContent">{item.content}</p>
                            <p className="operation">
                                <span className="replyTime">{item.addTime}</span>
                                <span className="handle">
                                        <a href="" onClick={e=>{
                                            e.preventDefault()
                                            dispatch(putWeiboAsync(item._id,1))
                                        }} className="top">{item.topNum}</a>
                                        <a href="" onClick={e=>{
                                            e.preventDefault()
                                            dispatch(putWeiboAsync(item._id,2))
                                        }} className="down_icon">{item.downNum}</a>
                                        <a href="" className="cut" onClick={e=>{
                                            e.preventDefault()
                                            dispatch(deleteWeiboAsync(item._id))
                                        }}>删除</a>
                                    </span>
                            </p>
                        </div>
                    ))
                }

            </div>
            <PageList/>
        </div>
    );
}

export default CommonOn;